<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" value="${pageContext.request.getContextPath()}"/>
<c:set var="static_file_server" value="${sessionScope.static_file_server}"/>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>SpringMVC Demo</title>
    <link type="text/css" rel="stylesheet" href="${static_file_server}/resources/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="${static_file_server}/resources/css/dataTables.bootstrap.css"/>
</head>
<script type="text/javascript" src="${static_file_server}/resources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${static_file_server}/resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${static_file_server}/resources/js/dataTable/jquery.dataTables.js"></script>
<script type="text/javascript" src="${static_file_server}/resources/js/dataTable/dataTables.bootstrap.js"></script>
<script language="JavaScript">
    $(document).ready(function () {

        $('#dataTable').dataTable({
            "bServerSide": true, // 是否启用回台分页
            "bStateSave": false, /*//客户端cookies开启*/
            "bFilter": true, /*//客户端过滤开启*/
            "bLengthChange": false, /*//开闭每页长度的选择条*/
            "iDisplayLength": 10, /*//每页显示条数*/
            "sAjaxSource": '/datatable',//数据源
            /* 国际化支持*/
            "language": {
                "sProcessing":   "处理中...",
                "sLengthMenu":   "显示 _MENU_ 项结果",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
                "sInfoEmpty":    "显示第 0 至 0 项，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            /*设置要显示的列*/
            "aoColumns": [
                { "mData": "bulletin_name", "bSortable": false, "bSearchable": true, "sWidth": "10%", "sClass": "center"},
                { "mData": "exam_name", "bSortable": false, "bSearchable": true, "sWidth": "10%", "sClass": "center"},
                { "mData": "school_name", "bSortable": false, "bSearchable": true, "sWidth": "10%", "sClass": "center"},
                { "mData": "group_name", "bSortable": false, "bSearchable": true, "sWidth": "10%", "sClass": "center"},
                { "mData": "user_name", "bSortable": false, "bSearchable": true, "sWidth": "5%", "sClass": "center"},
                { "mData": "identity", "bSortable": false, "bSearchable": true, "sWidth": "5%", "sClass": "center"},
                { "mData": "mobile", "bSortable": false, "bSearchable": true, "sWidth": "5%", "sClass": "center"},
                { "mData": "tutor", "bSortable": false, "bSearchable": true, "sWidth": "5%", "sClass": "center"},
            ],
            //回调函数，用于重写默认数据请求方法
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "type": "POST",
                    "dataType":"JSON",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            }
        });
    });
</script>
<body>
<h1>使用bootstrap DataTable 加载表格</h1>

<button type="button" id="button" class="btn btn-default">显示表格</button>

<table id="dataTable" class="table table-striped table-hover" style="width: 100%">
    <thead>
    <tr>
        <th>比赛名称</th>
        <th>考试名称</th>
        <th>学校名称</th>
        <th>团队名称</th>
        <th>学生姓名</th>
        <th>身份证号</th>
        <th>学生电话</th>
        <th>指导老师</th>
    </tr>
    </thead>
</table>

</body>
</html>